<template>
    <div class="page">
        <div class="white-thems relative">
            <app-search :isLocation="false">
                <a slot="left" href="javascript:;" class="go-back" @click="back"></a>
                <a slot="right" href="javascript:;" class="cancel" @click="back">取消</a>
            </app-search>
        </div>
        <div class="search-land">
            <div class="search-toast">
                <div v-if="recentTags.length!==0" class="search-recent">
                    <div class="search-head">
                        <a class="garbage-pic pull-right" href="javascript:;" @click="clear"></a>
                        最近搜索
                    </div>
                    <div class="search-tags recent-tags">
                        <span v-for="(val,index) in recentTags" :key="index">
                            <a href="javascript:;" @click="search(val)" v-text="val"></a>
                        </span>
                    </div>
                </div>
                <div class="search-head">热门搜索</div>
                <div class="search-tags">
                    <span v-for="(val,index) in hotTags" :key="index">
                        <a href="javascript:;" @click="search(val)" v-text="val"></a>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import mixin from '@/mixin'
import appSearch from '@/components/common/Search'
export default {
    data() {
        return {
            recentTags: ['衣服', 'USB'],
            hotTags: ['手机', '大闸蟹', 'Ssg面膜', '水', '五件套', '面膜', '扫地机器人', '洗发水', '夏威夷果', '螃蟹']
        }
    },
    mixins: [
        mixin
    ],
    components: {
        appSearch
    },
    methods: {
        clear() {
            this.recentTags = [];
        },
        search(key) {
            this.$router.push({ path: '/classify/result', query: { q: key } });
        }
    }
}
</script>
<style src="@/assets/scss/search.scss" lang="scss"></style>
